<template>
  <div class="wh-100" style="padding: 20px 30px">
    <div class="title">
      <div style="display: flex">
        <card-title title="黄色预警线索" />
        <a-tooltip title="专家对同一投标单位异常打分累计2次（异常打分：技术评分最高分且高于平均打分18%，同时投标单位中标）">
          <question-circle-outlined style="font-size: 20px; margin-left: 8px; color: #4a5061;" />
        </a-tooltip>
      </div>
      <a-button @click="reset" class="reset" type="link" :disabled="!linkageStatus">重置</a-button>
    </div>
    <div class="list-title">
      <span v-for="(item,index) in listTitle" class="tag" :class="{
          'tag-long': index === 3,
          'tag-short': index > 5
        }" :key="index">{{ item }}</span>
    </div>
      <div class="list-main">
        <div class="list-item" v-for="(item, index) in listData" :key="index">
          <a-tooltip v-for="(key, idx) in Object.keys(empty)" :title="item[key]" :key="key" color="orange">
            <span class="tag line-ellipsis" :class="{
              'tag-long': idx === 3,
              'tag-short': idx > 5
            }">
              {{ item[key] }}
            </span>
          </a-tooltip>
        </div>
      </div>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs, defineEmits } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  tablesData: {
    type: Array,
    default: () => ([]),
  },
  linkageStatus: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['dataReset']);

const { tablesData, linkageStatus } = toRefs(props)
const listData = ref()
const listTitle = ref(['校验时间', '专家名称','投标单位名称','标段编码','开标时间','招标项目所在业务单元','供应商技术平均分','专家技术评分','技术分偏差','偏差比例','是否最高分','是否中标']);
const empty = {
    verifyTime: '-',
    expertName: '-',
    suppliers: '-',
    sectionCode: '-',
    biddingTime: '-',
    sectionBuName: '-',
    supplierTechScore: '-',
    expertTechScore: '-',
    techScoreDeviation: '-',
    deviationRatio: '-',
    isHighestScore: '-',
    isWinBidding: '-',
};

const initList = () => {
  let result = tablesData.value;
  const length = result.length;
  if(length < 6){
    for(let i = 0; i < 6 - length; i++){
      result.push(empty);
    }
  }
  listData.value = result;
};
const reset = () => {
  emits('dataReset')
}
onMounted(() => {
  initList();
});
</script>

<style scoped lang="less">
.list-title {
  margin-top: 20px;
  border-radius: 12px 12px 0 0;
  height: 50px;
  line-height: 50px;
  width: 100%;
  font-size: 14px;
  font-weight: 300;
  color: #1B2A52;
  background-color: rgba(249, 156, 52,0.3);
  span {
    display: inline-block;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-item {
  height: 29px;
  line-height: 29px;
  width: 100%;
  font-size: 12px;
  color: #000000;
  font-weight: 400;
  span {
    display: inline-block;
  }
}
.tag {
    width: calc(100% / 12);
    text-align: center;
    // color: #1B2A52;
}
.tag.tag-long {
  width: calc(100% / 6);
}
.tag.tag-short {
  width: calc(41% / 6);
}
.tag-num {
  text-align: center;
  width: calc(55% / 2);
  // color: #1B2A52;
}
.list-main {
  height: 200px;
  width: 100%;
  overflow-y: auto;
  .list-item {
    margin-bottom: 2px;
  }
  .list-item:nth-child(2n) {
    background-color: #F99C340D;
  }
  .list-item:nth-child(2n+1) {
    background-color: #F99C341A;
}
}
.line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>